<template>
    <uni-popup ref='pop' type="center" :is-mask-click='false' :safe-area='false' @maskClick='tapMask'>
        <view class="box c-flex_column" v-if='answer'>
            <view class="row title">
                Answer Question NO.{{answer.index+1}}
            </view>
            <view class="row input-box">
                <uni-search-bar style="flex: 1" v-model='answer.answer' placeholder="请输入您的答案" cancel-button="none">
                    <template v-slot:searchIcon>
                        <view></view>
                    </template>
                </uni-search-bar>
            </view>
            <view class="row button-box">
                <view class="button cancel c-flex_1" @click="tapMask">
                    Cancel
                </view>
                <view class="button confirm c-flex_1" @click="tapConfirm">
                    Confirm
                </view>
            </view>
        </view>
    </uni-popup>
</template>

<script>
    export default {
        props: {},
        data: function() {
            return {
                show: false,
                answer: null
            }
        },
        watch: {
            show: function(n, o) {
                if (n == o) return;
                if (n) {
                    this.open();
                } else {
                    this.close();
                }
            }
        },
        methods: {
            open() {
                this.$refs.pop.open();
            },
            close() {
                this.$refs.pop.close();
            },
            showAnswerPop(show, answer) {
                this.show = show;
                this.answer = answer;
            },
            tapMask() {
                this.showAnswerPop(false);
            },
            tapConfirm() {
                this.$emit("confirm", {
                    answer: this.answer
                })
                this.showAnswerPop(false);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        padding: 40rpx;
        width: 80vw;
        border-radius: 20rpx;
        background: #fff;

        .row {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 15rpx;
        }

        .row:last-child {
            margin-bottom: 0;
        }

        .title {
            font-size: 36rpx;
            font-weight: 700;
            color: #333;
        }

        .input-box {}

        .button-box {
            display: flex;
            flex-direction: row;
            align-items: center;

            .button {
                margin-right: 15rpx;
                height: 70rpx;
                line-height: 70rpx;
                text-align: center;
                font-weight: 700;
                border-radius: 10rpx;
            }

            .button:last-child {
                margin-right: 0;
            }

            .cancel {
                background: #ffeae6;
                color: #ff4747;
            }

            .confirm {
                background: #ffda17;
                color: #333;
            }
        }
    }
</style>